<template>
  <section class="result-wrapper">
    <!-- 搜索结果标题数量 -->
    <section class="result-title">
      <h1>{{$route.query.key}}</h1>
      <span>{{"找到"+total+"个结果"}}</span>
    </section>
    <!-- 标签页 -->
    <section class="result-tabs">
      <el-tabs v-model="activeName">
        <el-tab-pane label="歌曲" name="songs" @click="type=1">
          <table class="result-songs">
            <thead>
              <th></th>
              <th>音乐标题</th>
              <th>歌手</th>
              <th>专辑</th>
              <th>时长</th>
            </thead>
            <tbody>
              <tr v-for="(item,index) in songs" :key="index" @dblclick="playMusic(item.id)">
                <td v-text="index+1+(page-1)*limit"></td>
                <td v-text="item.name" style="cursor:pointer"></td>
                <td v-text="item.artists[0].name"></td>
                <td v-text="item.album.name"></td>
                <td v-text="item.duration"></td>
              </tr>
            </tbody>
          </table>
        </el-tab-pane>
        <el-tab-pane label="歌单" name="lists" @click="type=1000">
          <ul class="song-list">
            <li
              v-for="(item,index) in list"
              :key="index"
              class="song-item"
              @click="toSongList(item.id)"
            >
              <!-- <span class="item-source">{{item.copywriter}}</span> -->
              <img :src="item.coverImgUrl" />
              <p v-text="item.name" class="list-name"></p>
            </li>
          </ul>
        </el-tab-pane>
        <el-tab-pane label="MV" name="mvs" @click="type=1004">
          <ul class="mvs-ul">
            <li
              v-for="(item,index) in mvs"
              :key="index"
              class="mv-item"
              @click="toMvdetailes(item.id)"
            >
              <section class="viewers">
                <i class="el-icon-video-play"></i>
                <span v-text="item.playCount"></span>
              </section>
              <img :src="item.cover" alt />
              <p v-text="item.name" class="item-name"></p>
              <p v-text="item.artistName" class="artist-name"></p>
            </li>
          </ul>
        </el-tab-pane>
      </el-tabs>
    </section>
    <!-- 分页：total总共条数，current-page当前页，page-size每页条数，current-change页码改变事件 -->
    <section class="page">
      <el-pagination
        layout="prev, pager, next"
        :total="total"
        :page-size="12"
        @current-change="handleCurrentChange"
        :current-page="page"
      ></el-pagination>
    </section>
  </section>
</template>

<script>
import axios from "axios";
import { formattingTime, formattingPlaycount } from "@/api/commend";
export default {
  name: "result",
  data() {
    return {
      activeName: "songs",
      page: 1,
      type: "1",
      limit: 10,
      songs: [],
      mvs: [],
      list: [],
      total: 0,
      keywords: this.$route.query.key,
    };
  },
  watch: {
    activeName() {
      this.page = 1;
      switch (this.activeName) {
        case "songs":
          this.type = "1";
          this.limit = 10;
          this.getResult();
          break;

        case "lists":
          this.type = "1000";
          this.limit = 15;
          this.getResult();
          break;

        case "mvs":
          this.type = "1004";
          this.limit = 12;
          this.getResult();
          break;

        default:
          break;
      }
    },
    "$route.query.key": [
      "changePage",
      "getResult",
    ],
  },
  methods: {
    getResult() {
      axios({
        method: "get",
        url: "https://autumnfish.cn/search",
        params: {
          keywords: this.$route.query.key,
          type: this.type,
          limit: this.limit,
          offset: (this.page - 1) * this.limit,
        },
      }).then((res) => {
        switch (this.type) {
          case "1":
            this.songs = formattingTime(res.data.result.songs);
            this.total = res.data.result.songCount;
            break;
          case "1000":
            this.total = res.data.result.playlistCount;
            this.list = res.data.result.playlists;
            break;

          case "1004":
            this.total = res.data.result.mvCount;
            this.mvs = formattingPlaycount(res.data.result.mvs);
            break;

          default:
            break;
        }
      });
    },
    handleCurrentChange(val) {
      // 保存页码
      this.page = val;
      // 重新获取数组
      this.getResult();
    },
    // 播放音乐
    playMusic(id) {
      axios({
        method: "get",
        url: "https://autumnfish.cn/song/url",
        params: {
          id: id,
        },
      }).then((res) => {
        let url = res.data.data[0].url;
        if (url) {
          this.$parent.$parent.$parent.$parent.$parent.url = url;
        } else {
          this.$message.error("暂无版权");
        }
      });
    },
    // 歌单详情
    toSongList(id) {
      this.$router.push(`/songlists?keyid=${id}`);
    },
    toMvdetailes(id) {
      this.$router.push(`/mvdetails?mvid=${id}`);
    },
    changePage(){
      this.page = 1;
    }
  },
  created() {
    this.getResult();
  },
};
</script>

<style lang="scss">
</style>